跳到主要内容

过渡

过渡定义了状态机如何以及何时从一个状态移动到另一个状态。一个过渡由四个部分组成:

路径

过渡移动的方向。

示例:角色可能有一条从 Idle 到 Walk 的路径,也有另一条从 Walk 返回 Idle 的路径。

条件

过渡发生的时机。

示例:角色可能在按下按钮时过渡到 Walk,然后在松开按钮时返回 Idle。

属性

过渡的行为方式。

示例:你可以将过渡持续时间设置为 0.2 秒,让状态之间的变化更平滑。

操作

过渡发生时要执行的额外行为。

示例:一个过渡可以触发事件、设置属性值,或对齐目标。

过渡路径​

过渡路径决定状态机如何从一个状态移动到另一个状态。

要创建过渡路径,请将光标移动到你想离开的状态附近,直到圆点出现。点击圆点并拖拽到你想过渡到的状态。

创建过渡

连接两个状态后,过渡路径会显示一个带箭头图标的圆圈,用于指示过渡方向。在这个示例中,状态机可以从 Timeline 1 移动到 Timeline 2,但不能从 Timeline 2 返回 Timeline 1。

要允许状态机返回 Timeline 1,请从 Timeline 2 开始创建另一条过渡路径。

创建反向过渡

你可以在相同的两个状态之间创建多个过渡。每个过渡都可以有不同的条件,从而创建“或”逻辑。

创建“或”过渡

过渡条件​

条件决定过渡何时可以发生。

如果没有条件,过渡会在被到达时立即触发。这可能导致状态机在状态之间快速移动,或直接跳到某个单一动画。

添加条件​

要为过渡添加条件,请选择该过渡,然后点击 Conditions 旁边的加号按钮。

一个条件由三部分组成:

  • Source value - 条件监听的值或事件
  • Operator - Source value 的比较方式
  • Comparison value - Source value 要与之比较的值

例如,角色可能在 isWalking 为 true 时从 Idle 过渡到 Walk。

在这个条件中,isWalking 是 Source value,equals 是 Operator,true 是 Comparison value。

添加过渡条件

Source Value​

条件可以由许多不同的来源驱动,包括:

  • View Model 属性
  • 事件
  • 内置属性,例如画板宽度、高度和比例

Source value

Operator​

条件可以使用 equals、does not equal、greater than、greater than or equal to、less than 和 less than or equal to 等比较方式。可用的比较方式取决于正在比较的值类型。

Operator

Comparison value​

Comparison value 是 Source value 要与之比较的值。

Comparison value

你可以输入固定的 comparison value,例如 true、100 或 "mobile"。你也可以将 comparison value 数据绑定到另一个属性,让过渡与动态数据进行比较。

例如,当 speed 大于数据绑定的 walkThreshold 值时,可以发生过渡。

添加多个条件​

你可以向单个过渡添加多个条件。所有条件都必须满足后,过渡才会发生。

添加多个条件

过渡属性​

添加过渡后,选择方向指示器即可配置该过渡。过渡面板包含三个不同的部分:过渡属性、条件和插值。

选择多个过渡可以一次更新多个属性。

过渡属性

Duration​

Duration 属性描述过渡发生所需的时间。

Duration 默认设置为零,表示过渡会立即发生。因此,当我们在这两个动画之间过渡时,看起来就像对象从画板的一侧瞬间跳到了另一侧。

示例文件可在 Rive Marketplace 中查看:Transitions Demos。

Exit Time​

Exit Time 告诉状态机,在过渡之前当前状态必须播放多少。

默认情况下,Exit Time 未勾选。要启用 Exit Time,请使用复选框。启用后,你可以使用时间值或百分比。

例如,如果你希望状态机在过渡前播放完整动画,可以输入该动画的持续时间,或使用 100%。

Exit time 100%

Pause source when exiting​

Pause Source When Exiting 会在过渡播放期间暂停你正在离开的状态中的动画。

在这个示例中,上下运动会在过渡开始后立即暂停。

退出时暂停

Allow exit during transition​

Allow exit during transition 控制状态机是否可以在某个过渡完成之前离开该过渡。

例如,如果按钮正在从 Idle 过渡到 Hover,而用户将光标移开,Allow exit during transition 会允许它立即过渡回 Idle。

过渡期间允许退出

Interpolation​

你可以在 Transitions Panel 底部为过渡添加插值。默认情况下,插值设置为 linear,但你也可以使用 cubic 和其他插值。

如果你不熟悉插值的基础知识,请参阅插值(缓动)。

操作​

过渡也可以在发生时执行操作。

与用于决定过渡是否可以发生的条件不同,操作会在过渡被触发时执行某项操作。

操作可用于:

  • 设置属性值
  • 报告事件
  • 对齐目标
  • 控制焦点
  • 触发脚本操作

操作也可以在状态开始或结束时触发。

请参阅状态操作。

创建操作​

创建过渡操作

  1. 添加操作

    选中过渡后,前往 Actions 标签页,点击 + 按钮,然后选择一种操作类型。

  2. 配置操作

    根据操作类型配置该操作。

Action timing​

每个操作都可以在以下时机运行:

  • Start — 在过渡开始时运行
  • End — 在过渡完成后运行

Randomize exit​

Randomize Exit 让一个状态从它的出站过渡路径中随机选择一条。

你可以通过“随机退出”示例了解如何使用 Randomize Exit:为一个状态配置多条离开路径,并为每条路径分配不同权重,状态机会根据权重随机选择要走的路径。

要使用它,请选择起始状态并启用 Randomize Exit。该状态会列出每条离开它的路径,并允许你为每条路径分配权重。

权重越高,该路径被选中的可能性就越大。例如,如果 Timeline 1 的权重为 3,Timeline 2 的权重为 1,则状态机有 75% 的概率过渡到 Timeline 1,有 25% 的概率过渡到 Timeline 2。

禁用过渡​

你可以在不删除过渡的情况下暂时禁用它。当你想隔离状态机的一部分进行测试,或暂时移除某条路径但不丢失其配置时,禁用会很有用。

有两种方式可以切换过渡的启用状态:

  • 从过渡面板: 选择过渡,然后点击面板中的启用/禁用图标。
  • 从画布: 右键点击过渡,然后选择 Disable transition(如果已禁用,则选择 Enable transition)。

从右键菜单禁用过渡

看完还有疑问?进群交流下!
与众多 Rive 创作者、开发者一起交流探讨与答疑解惑。
加入交流群